var todosInput = document.getElementById('todosInput')
var todosAddBtn = document.getElementById('todosAddBtn')
var todosLists = document.getElementById('todosLists')
var todos = document.getElementById('todos')

//当页面刚开始加载的时候，还没有输入事项，需要隐藏todos
window.onload = todolistHide

//添加事项功能
todosAddBtn.onclick = TodoAdd

//添加todo的功能
function TodoAdd() {
    // 把用户输入的值去除前后空格再保存起来
    value = todosInput.value.trim()
    // 保存之后清理输入的内容
    todosInput.value = ''
    if (value == '') {
        alert('你还没有输入事项')
    } else {
        //添加todo时显示todos
        todos.style.display = 'block'
        // 创建【li】节点
        var todoList = document.createElement('li')
        var todoListText = document.createTextNode(value)

        //创建【选择】按钮
        var todoListInput = document.createElement('input')
        //添加【选择】按钮class样式
        todoListInput.setAttribute('class', 'todoListInput')
        todoListInput.setAttribute('type', 'checkbox')
        //点击触发选择功能
        todoListInput.onclick = function () {
            todoChecked(todoListInput, todoList)
        }
        //创建【删除】按钮
        var todoListBtn = document.createElement('button')
        //添加【删除】按钮class样式
        todoListBtn.setAttribute('class', 'todoDelete')
        var todoListBtnText = document.createTextNode('删除')
        //点击触发删除功能
        todoListBtn.onclick = function () {
            todosLists.removeChild(todoList)
            todolistHide()
        }
        todoListBtn.appendChild(todoListBtnText)
        //将【选择】节点添加进li
        todoList.appendChild(todoListInput)
        //将【文本】节点添加进li
        todoList.appendChild(todoListText)
        //将【删除】按钮添加进li
        todoList.appendChild(todoListBtn)
        //将【创建的li】添加进todo
        todosLists.appendChild(todoList)
    }
}

//选择已完成/取消功能
function todoChecked(el, todo) {
    if (el.checked == true) {
        todo.setAttribute('class', 'todoDone')
    } else {
        todo.setAttribute('class', 'none')
    }
}

//隐藏todosLists功能
function todolistHide() {
    if (todosLists.children.length == 0) {
        todos.style.display = 'none'
    }
}
